<script setup lang="ts">
import { ref } from 'vue'
import { onLoad, onShow } from '@dcloudio/uni-app'

import { getDictAllData } from '@/services/dict'
import { pageStoreAPI } from '@/services/store'

import { useStore, useMemberStore, useCategory } from '@/stores'
const { getStoreInfo, changeStoreInfo } = useStore()
const { getUserInfo } = useMemberStore()
const { getBuyMethodList, setBuyMethodActiveIndex, getBuyMethodActiveIndex } = useCategory()

// 引入百度地图API
// eslint-disable-next-line no-undef
const bmap = require('../../static/js/bmap-wx.min.js')
const BMapWX = bmap.BMapWX
//    这个地方是你在百度地图中申请的ak
var BMap = new BMapWX({ ak: 'hOtF9JR4wCD5SSQGKhddv4IsHildEpVF' })
const loading = ref<boolean>(true)

const info = ref<any>({
  latitude: null,
  longitude: null,
  address: '',
})

const getData = () => {
  const address = info.value.address
  BMap.geocoding({
    address: address,
    fail(res: any) {
      console.log(res)
    },
    success(res: any) {
      info.value.latitude = res.result.location.lat
      info.value.longitude = res.result.location.lng
      console.log(res.result.location.lng, 'jingdu')
      console.log(res.result.location.lat, 'weidu')
    },
  })
}

/**
 * 根据当前位置查看最近门店显示
 */
const queryLocationRecentlyStore = () => {
  uni.getLocation({
    type: 'gcj02', // 'wgs84', //
    isHighAccuracy: true,
    geocode: true,
    success: async (res: any) => {
      info.value.latitude = res.latitude
      info.value.longitude = res.longitude
      const storeRes = await pageStoreAPI({
        page: 1,
        limit: 1,
        latitude: res.latitude,
        longitude: res.longitude,
      })
      const record: any = storeRes.data.list[0]
      changeStoreInfo(record)
    },
    fail: (res: any) => {
      console.error(res)
    },
    complete: (res: any) => {},
  })
}

const showMap = () => {
  // 打开系统位置地图
  uni.openLocation({
    latitude: parseFloat(info.value.latitude),
    longitude: parseFloat(info.value.longitude),
    // name: info.value.address,
    success: function (res) {
      console.log('打开系统位置地图成功')
    },
    fail: function (error) {
      console.log(error)
    },
  })
}
// 页面加载

onLoad(async (e: any) => {
  console.log('ceshi', e)
  loading.value = true
  queryLocationRecentlyStore()
  loading.value = false
})

const loginHandler = () => {
  uni.navigateTo({
    url: '/pages/login/login',
  })
}
const goMethod = (item: any, index: number) => {
  setBuyMethodActiveIndex(index)
  uni.switchTab({
    url: '/pages/category/category',
  })
}
const goActivity = (index: number) => {
  if (index === 0) {
    uni.navigateTo({
      url: '/pagesMember/coupon/coupon',
    })
  } else if (index === 1) {
    uni.navigateTo({
      url: '/pagesMember/valuecenter/center',
    })
  } else if (index === 2) {
    uni.navigateTo({
      url: '/pagesMember/points/invitations',
    })
  } else if (index === 3) {
    uni.navigateTo({
      url: '/pagesMember/points/points',
    })
  }
}

const personHandler = () => {
  uni.switchTab({
    url: '/pages/my/my',
  })
}
</script>

<template>
  <view class="index">
    <view class="banner">
      <image class="img" src="@/static/img/5.png" />
    </view>
    <!-- <view>
      <text class="map" @tap="showLocationMap">查看当前位置</text>
      <text class="map" @tap="showMap">查看地图</text>
    </view> -->
    <view class="address">
      <navigator
        class="address-item"
        :url="`/pagesStore/store/store?latitude=${info.latitude}&longitude=${info.longitude}`"
        hover-class="none"
      >
        <text class="title">{{ getStoreInfo()?.storeName }}</text>
        <text class="info">距离您{{ getStoreInfo()?.distanceKm }}km</text>
      </navigator>
      <text class="iconfont icon-home"></text>
    </view>

    <view class="method">
      <view
        class="method-item"
        @tap="goMethod(item, index)"
        :key="index"
        v-for="(item, index) in getBuyMethodList()"
      >
        <image class="img" mode="aspectFill" :src="item.imgUrl" />
        <text>{{ item.name }}</text>
      </view>
    </view>

    <view class="member-card">
      <image class="img" src="@/static/img/4.png" />
    </view>

    <view class="activity">
      <view class="activity-item" @tap="goActivity(0)">
        <text class="iconfont icon-liwu_o"></text>
        <text class="text">领券中心</text>
      </view>
      <view class="activity-item" @tap="goActivity(1)">
        <text class="iconfont icon-zijinxunhuan_o"></text>
        <text class="text">储值有礼</text>
      </view>
      <view class="activity-item" @tap="goActivity(2)">
        <text class="iconfont icon-RectangleCopy4"></text>
        <text class="text">邀请有礼</text>
      </view>
      <view class="activity-item" @tap="goActivity(3)">
        <text class="iconfont icon-yizhan_o"></text>
        <text class="text">积分商城</text>
      </view>
    </view>

    <view class="person" v-if="getUserInfo()?.id">
      <view class="person-top">
        <view class="left" @click="personHandler">
          <view class="img-box">
            <image class="avatar" mode="aspectFill" :src="getUserInfo()?.avatarUrl" />
          </view>
          <view class="info">
            <text class="name">{{ getUserInfo()?.nickName }}</text>
            <text class="level">等级：{{ getUserInfo()?.member?.levelName }}</text>
          </view>
        </view>
        <view class="right">
          <image class="img" src="@/static/img/11.png" />
          <text>会员码</text>
        </view>
      </view>
      <view class="person-bottom">
        <view class="person-bottom-item">
          <text class="val">{{ getUserInfo()?.member?.availableBalance }}</text>
          <text class="text">余额（元）</text>
        </view>
        <view class="person-bottom-item">
          <text class="val">{{ getUserInfo()?.member?.couponCount }}</text>
          <text class="text">卡券</text>
        </view>
        <view class="person-bottom-item">
          <text class="val">{{ getUserInfo()?.member?.points }}</text>
          <text class="text">积分</text>
        </view>
      </view>
    </view>
    <view class="no-person" v-else>
      <view class="right">
        <view class="title">欢迎光临{{ getStoreInfo()?.storeName }}</view>
        <view class="info">登录成为会员，享更多权益</view>
      </view>
      <view class="left">
        <view class="button" @click="loginHandler">立即登录</view>
      </view>
    </view>
  </view>
</template>

<style lang="scss">
@import '@/styles/variables.scss';
.index {
  display: flex;
  flex-direction: column;
  background-color: #e9eaef;
  .banner {
    height: 800rpx;
    width: 100%;

    .img {
      width: 100%;
      height: 100%;
    }
  }
  .address {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100rpx;
    background-color: #fff;
    padding: 20rpx 30rpx;
    .address-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      .info {
        color: #959595;
        font-size: 20rpx;
      }
      .title {
        font-size: 40rpx;
        color: #3c3c44;
        font-weight: bold;
      }
    }
  }

  .method {
    display: flex;
    justify-content: space-between;
    padding: 0 40rpx;
    margin: 20rpx 0;
    .method-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      background-color: #4f9849;
      border-radius: 20rpx 20rpx;
      padding: 30rpx;

      .img {
        width: 120rpx;
        height: 120rpx;
      }
      text {
        margin-top: 30rpx;
        color: #fff;
        font-size: 30rpx;
      }
    }
  }
  .member-card {
    height: 200rpx;
    border-radius: 20rpx 20rpx;
    margin: 20rpx 40rpx;
    .img {
      width: 100%;
      height: 100%;
    }
  }

  .activity {
    display: flex;
    justify-content: space-between;
    padding: 0 40rpx;
    margin: 20rpx 0;
    .activity-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      .iconfont {
        font-size: 64rpx;
        color: #4f9849;
      }
      .text {
        font-size: 24rpx;
        margin-top: 8rpx;
        color: #343537;
      }
    }
  }

  .person {
    margin: 20rpx 20rpx;
    padding: 40rpx;
    border-radius: 20rpx 20rpx;
    background-color: #fff;

    .person-top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      background-color: #fff;
      padding-bottom: 40rpx;

      .left {
        display: flex;
        align-items: center;
        flex-direction: row;
        .img-box {
          display: flex;
          justify-content: center;
          align-items: center;
          background-color: #f4f4f6;
          width: 80rpx;
          height: 80rpx;
          margin-right: 20rpx;
          border-radius: 50%;
          .avatar {
            border: 2px solid #fff;
            width: 60rpx;
            height: 60rpx;
            border-radius: 50%;
            background-color: #eee;
            vertical-align: top;
          }
        }

        .info {
          display: flex;
          flex-direction: column;

          .name {
            font-size: 30rpx;
            font-weight: bold;
            color: #000000;
          }

          .level {
            font-size: 24rpx;
            color: #767676;
            margin-top: 6rpx;
          }
        }
      }

      .right {
        display: flex;
        flex-direction: column;
        align-items: center;

        .img {
          width: 40rpx;
          height: 40rpx;
          margin-bottom: 10rpx;
        }

        text {
          font-size: 24rpx;
          color: #767676;
        }
      }
    }

    .person-bottom {
      background-color: #fff;
      padding-top: 40rpx;
      border-top: red 6rpx solid;
      display: flex;
      justify-content: space-around; // 水平均匀分布
      padding-top: 30rpx;
      background-color: #fff;
      border-top: #eeeeee 2px solid;

      .person-bottom-item {
        display: flex;
        flex-direction: column;
        align-items: center;

        .val {
          margin-bottom: 10rpx;
          font-size: 32rpx;
          font-weight: bold;
          color: #000;
        }

        .text {
          font-size: 24rpx;
          color: #767676;
        }
      }
    }
  }

  .no-person {
    display: flex;
    align-items: center; // 垂直居中
    justify-content: space-between; // 左右两端对齐
    padding: 20rpx 40rpx; // 内边距，适合小程序
    background-color: #fff; // 背景浅灰，提升可读性
    border-radius: 20rpx; // 圆角
    margin: 20rpx; // 外边距

    .right {
      flex: 1; // 占据剩余空间
      display: flex;
      flex-direction: column; // 垂直排列标题和信息

      .title {
        font-size: $font-size;
        font-weight: 600;
        color: #343537;
        margin-bottom: 8rpx;

        // 如果 storeName 较长，可加省略号
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 400rpx;
      }

      .info {
        font-size: $font-mini-size;
        color: #666;
      }
    }

    .left {
      // 登录按钮容器，可加 margin 控制间距
      .button {
        padding: 0 32rpx;
        height: 40rpx;
        line-height: 40rpx;
        background-color: $color; // 主题色（如橙色）
        color: #fff;
        font-size: 18rpx;
        font-weight: 500;
        border-radius: 20rpx;
        text-align: center;
        min-width: 140rpx;
      }
    }
  }
}
</style>
